<template>
  <div :style="{ margin: '0 10%' }">
    <!-- 添加大标题 -->
    <h1 style="text-align: center; font-weight: bold;">渤海银行沈阳分行客户KYC信息登记卡</h1>
    <!-- 添加小标题 -->
    <h3 style="text-align: center;">客户MGM潜力洞察</h3>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="106px"
             label-position="left">
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label-width="130px" label="潜在可推荐M2姓名" prop="potentialName">
            <el-input v-model="formData.potentialName" placeholder="请输入潜在可推荐M2姓名" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="M2与客户关系" prop="relationship">
            <el-radio-group v-model="formData.relationship" size="medium">
              <el-radio v-for="(item, index) in relationshipOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="40px" label="其他" prop="relationshipother">
            <el-input v-model="formData.relationshipother" placeholder="请输入其他" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="130px" label="是否成为我行客户" prop="isMyClient">
            <el-radio-group v-model="formData.isMyClient" size="medium">
              <el-radio v-for="(item, index) in isMyClientOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label-width="220px" label="M2活动形式主题偏好与产品需求" prop="preference">
            <el-input v-model="formData.preference" placeholder="请输入M2活动形式主题偏好与产品需求" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label-width="130px" label="潜在可推荐M2姓名" prop="field252">
            <el-input v-model="formData.field252" placeholder="请输入潜在可推荐M2姓名" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="M2与客户关系" prop="field253">
            <el-radio-group v-model="formData.field253" size="medium">
              <el-radio v-for="(item, index) in field253Options" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="40px" label="其他" prop="field254">
            <el-input v-model="formData.field254" placeholder="请输入其他" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="130px" label="是否成为我行客户" prop="field255">
            <el-radio-group v-model="formData.field255" size="medium">
              <el-radio v-for="(item, index) in field255Options" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label-width="220px" label="M2活动形式主题偏好与产品需求" prop="field256">
            <el-input v-model="formData.field256" placeholder="请输入M2活动形式主题偏好与产品需求" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label-width="130px" label="潜在可推荐M2姓名" prop="field258">
            <el-input v-model="formData.field258" placeholder="请输入潜在可推荐M2姓名" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="M2与客户关系" prop="field259">
            <el-radio-group v-model="formData.field259" size="medium">
              <el-radio v-for="(item, index) in field259Options" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label-width="40px" label="其他" prop="field260">
            <el-input v-model="formData.field260" placeholder="请输入其他" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="130px" label="是否成为我行客户" prop="field261">
            <el-radio-group v-model="formData.field261" size="medium">
              <el-radio v-for="(item, index) in field261Options" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label-width="220px" label="M2活动形式主题偏好与产品需求" prop="field262">
            <el-input v-model="formData.field262" placeholder="请输入M2活动形式主题偏好与产品需求" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="text-align: center;">
        <el-button type="primary" @click="goTofivePage()">下一页</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name:'fourpage',
  components: {},
  props: [],
  data() {
    return {
      formData: {
        potentialName: undefined,
        relationship: undefined,
        relationshipother: undefined,
        isMyClient: undefined,
        preference: undefined,
        field252: undefined,
        field253: undefined,
        field254: undefined,
        field255: undefined,
        field256: undefined,
        field258: undefined,
        field259: undefined,
        field260: undefined,
        field261: undefined,
        field262: undefined,
      },
      rules: {
        potentialName: [],
        relationship: [],
        relationshipother: [],
        isMyClient: [],
        preference: [],
        field252: [],
        field253: [],
        field254: [],
        field255: [],
        field256: [],
        field258: [],
        field259: [],
        field260: [],
        field261: [],
        field262: [],
      },
      relationshipOptions: [{
        "label": "亲属",
        "value": 1
      }, {
        "label": "同学",
        "value": 2
      }, {
        "label": "商务伙伴",
        "value": 3
      }, {
        "label": "朋友",
        "value": 4
      }, {
        "label": "其他",
        "value": 5
      }],
      isMyClientOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      field253Options: [{
        "label": "亲属",
        "value": 1
      }, {
        "label": "同学",
        "value": 2
      }, {
        "label": "商务伙伴",
        "value": 3
      }, {
        "label": "朋友",
        "value": 4
      }, {
        "label": "其他",
        "value": 5
      }],
      field255Options: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      field259Options: [{
        "label": "亲属",
        "value": 1
      }, {
        "label": "同学",
        "value": 2
      }, {
        "label": "商务伙伴",
        "value": 3
      }, {
        "label": "朋友",
        "value": 4
      }, {
        "label": "其他",
        "value": 5
      }],
      field261Options: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    goTofivePage() {
      console.log(123)
      this.$router.push('/userinfo/fivepage');  // 跳转到名为fivepage 的路由
    }
  }
}

</script>
<style>
</style>
